<template>
  <div>
      <div class="swiper">
          <div class="swiper_imgs">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in banner" :key="index">
                    <img :src="item.picUrl" width="100%">
                </van-swipe-item>
            </van-swipe>
          </div>
        <div class="swiper_classify">
            <div class="swiper_classify_items">
                <div class="swiper_classify_item">
                    <p class="swiper_classify_icon">
                        <img width="100%" src="../../assets/girdIcon/爱心.png" alt="">
                    </p>
                    <p class="swiper_classify_text">签到</p>
                </div>
                <div class="swiper_classify_item">
                    <p class="swiper_classify_icon">
                        <img width="100%" src="../../assets/girdIcon/星星.png" alt="">
                    </p>
                    <p class="swiper_classify_text">礼券</p>
                </div>
                <div class="swiper_classify_item">
                    <p class="swiper_classify_icon">
                        <img width="100%" src="../../assets/girdIcon/皇冠 .png" alt="">
                    </p>
                    <p class="swiper_classify_text">砍价</p>
                </div>
                <div class="swiper_classify_item">
                    <p class="swiper_classify_icon">
                        <img width="100%" src="../../assets/girdIcon/吊灯.png" alt="">
                    </p>
                    <p class="swiper_classify_text">专栏</p>
                </div>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            banner: []
        }
    },
    mounted() {
      this.$API.getBanner().then(res=> {
        this.banner = res.data.data
      })
    }
}
</script>

<style scoped>
.swiper {
    position: relative;
}
.swiper_imgs img {
    height: 7rem;
}
.swiper_classify {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.18rem;
    background-color:#fff;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.swiper_classify_items {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.swiper_classify_item {
    text-align: center;
    font-size: 0.3rem;
    color: #333;
}
.swiper_classify_icon {
    width: 0.8rem;
}
</style>